<template>
  <div class="my-dialog">
    <div class="header">
      <!-- 一个组件多个插槽 必须给slot设置 name="插槽名" 让父组件来区分传入的时哪一个占位的slot -->
      <!-- slot 中写的内容就是默认内容 ， 如果父组件传了值 就使用父组件的 没传值就显示默认内容 -->
      <slot name="header">疏通</slot>
    </div>
    <div class="content">
      <slot name="content"> 默认值 </slot>
    </div>
    <div class="footer">
      <slot yes="yes" no="取消" name="footer">jio</slot>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
.my-dialog {
  width: 400px;
  padding: 10px 20px;
  border: 3px solid #000;
  border-radius: 5px;
  margin: 10px;
}
</style>
